<template>
  <div class="w-full h-full ">
    <div class="w-full h-full flex">
      <div class="flex-1 flex flex-wrap overflow-auto roll" :style="{ columnGap: '5px', rowGap: '5px' }">

        <div v-for="(item, index) in cameraList" :key="index" class="relative "
          :style="{ width: '32.7%', height: '32.7%', background: '#171720' }">
          <div class="absolute  top-0 z-10 flex justify-between" :style="{
            'font-Size': '12px', padding: '3px 9px', background: '#060C16',
            'border-bottom-right-radius': '10px', color: '#FFFFFF'
          }">
            <span>{{ item.linkTime | datefmt('YYYY-MM-DD HH:mm:ss') }}</span>
          </div>
          <img :src="getImgSrc('组 4029@2x.png')" class="absolute cursor-pointer"
            :style="{ right: '3px', width: '24px', height: '24px' }" v-if="item.streamUrl != ''"
            @click="toFullScreen(item)" />

          <img :src="getImgSrc('组 4002@2x.png')" class="absolute left-1/2 top-1/2 cursor-pointer z-10"
            :style="{ transform: 'translate(-50%,-50%)', right: '44px', width: '44px', height: '44px' }"
            v-if="!item.isAutoPlay" />

          <div class="absolute w-full z-10" :style="{ background: '#292E37', padding: '3px 10px', bottom: '-1px' }"
            v-if="item.cameraName != ''">
            <span style="color:#FFFFFF">{{ item.cameraName }}</span>
          </div>
          <!-- <iframe :src="item.streamUrl"
            class="small-video"
            frameborder="0"
            allowfullscreen
            allow="autoplay; fullscreen; microphone;"></iframe> -->
          <video id="video" class="small-video" :src="getVideo(item.streamUrl)" :autoplay="item.isAutoPlay">
          </video>
        </div>
        <div v-if="cameraList.length == 0" class="no-data">
          未关联监控设备
        </div>
      </div>
    </div>
    <div v-if="isFullScreen">
      <el-dialog width="80%" top="5%" append-to-body :close-on-click-modal="false" destroy-on-close
        :visible.sync="isFullScreen" :title="`监控设备名称：${fullScreenCamera.cameraName}`">
        <iframe :src="fullScreenCamera.streamUrl" class="small-video" frameborder="0" allowfullscreen
          allow="autoplay; fullscreen; microphone;" :style="{ height: fullScreenHeight, width: '100%' }"></iframe>
      </el-dialog>

    </div>
  </div>
</template>

<script>
import deviceManageApi from '@/api/device-manage'
const VIDEO_URL = [
  'VID_20230314_112703.mp4',
  'VID_20230314_144046.mp4',
  'VID_20230314_144800.mp4',
  'VID_20230314_151738.mp4',
  'VID_20230314_151832.mp4',
  'VID_20230314_152300.mp4',
  'VID_20230314_152401.mp4',
  'VID_20230314_152651.mp4',
  'VID_20230314_160339.mp4',
  'VID_20230314_160400.mp4',
  'VID_20230314_160424.mp4',
]
export default {
  name: 'MonitorModel',
  props: {
    systemMsg: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      cameraList: [],
      nowDate: new Date(),
      isFullScreen: false,
      fullScreenCamera: {},
      fullScreenHeight: this.getHeightAndWidth(),

    }
  },

  mounted() {
    this.initEquipmentCamera()

    // setInterval(() => {
    //   this.nowDate = new Date()
    // }, 1000)
  },
  methods: {
    getHeightAndWidth() {
      let clientHeight = 0
      if (
        document.body.scrollHeight === window.screen.height &&
        document.body.scrollWidth === window.screen.width
      ) {
        clientHeight = window.screen.height - 5 // 网页可见区域高
      } else {
        clientHeight = document.body.clientHeight - 5 // 网页可见区域高
      }
      return clientHeight - 220 + 'px'
    },
    initEquipmentCamera() {
      const data = {
        equipmentId: this.systemMsg.equipment.id,
        isNeedCameraMsg: true,
      }
      deviceManageApi.getCameraBindEquipment(data).then((res) => {
        this.cameraList = res.data.data
        console.log(' this.cameraList', this.cameraList)
        this.cameraList.forEach((ele) => {
          ele.isAutoPlay = true
        })
        if (this.cameraList.length != 0 && this.cameraList.length < 9) {
          for (let i = this.cameraList.length; i < 9; i++) {
            this.cameraList.push({
              isAutoPlay: false,
              cameraId: '',
              equipmentId: '',
              equipmentInfo: '',
              linkTime: new Date(),
              streamUrl: "",
              cameraName: ''
            })
          }
        }
      })
    },

    getImgSrc(imgName) {
      return require(`@/assets/alarm-dialog/${imgName}`)
    },
    getVideo(streamUrl) {
      const index = Math.floor(Math.random() * 10)
      const url = 'http://cool.runjian.com:9655/screen/video/' + VIDEO_URL[index];
      return streamUrl ? url : ''
    },
    toFullScreen(item) {
      this.isFullScreen = true;
      this.fullScreenCamera = item
    }
  },
}

</script>

<style lang="scss" scoped>
.container::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.container::-webkit-scrollbar-thumb {
  background: #d3dce6;
  border-radius: 8px;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.overflow-auto {
  overflow: auto;
}

.flex-1 {
  flex: 1 1 0%;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.top-0 {
  top: 0px;
}

.z-10 {
  z-index: 10;
}

.justify-between {
  justify-content: space-between;
}

.cursor-pointer {
  cursor: pointer;
}

.left-1\/2 {
  left: 50%;
}

.top-1\/2 {
  top: 50%;
}

.small-video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/*  滚动条整体样式 */
.roll::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条 */
.roll::-webkit-scrollbar-thumb {
  background: rgba(14, 156, 255, 1);
  border-radius: 8px;
}

/* 滚动条轨道 */
.roll::-webkit-scrollbar-track {
  box-shadow: inset 0 0 3px rgba(28, 30, 33, 1);
}

.no-data {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
}

/deep/.el-dialog__header {
  padding: 8px 16px;
  padding: 8px 16px;
  color: rgba(0, 0, 0, 0.65);
  background: #eff2f4 !important;
  border-bottom: 1px solid #d8d8d8 !important;
  border-radius: 4px 4px 0 0;
}

/deep/.el-dialog__title {
  font-family: SourceHanSans;
  font-size: 18px;
  color: #272c33;
  font-weight: 500;
}

/deep/.el-dialog__headerbtn {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 20px;
}

/deep/.el-dialog__body {
  padding: 15px 20px !important;
  color: #606266 !important;
  font-size: 14px !important;
  word-break: break-all !important;
}
</style>
